<template>
  <div class="awards-container">
    <title-b
      :title="awardInfo.moduleTitle"
      iconName="el-icon-trophy"
      :backgroundColor="myThemeColor"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
    ></title-b>
    <div class="awardEdit-min-box">
      <AutoTextArea
        v-for="award in awardInfo.awardList"
        :key="award.id"
        :data="award.desc"
        :edit="edit"
        shape="point"
        @textChange="onAwardChange(award.id, $event)"
      ></AutoTextArea>
    </div>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import AutoTextArea from '@/components/base/AutoTextArea.vue'
import { nanoid } from 'nanoid'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      showTool: '',
      edit: false,
      awardInfo: {
        awardList: [
          { id: nanoid(), desc: '2020年国家奖学金' },
          { id: nanoid(), desc: '2019年优秀三好学生' },
        ],
        moduleTitle: '荣誉奖励',
      },
      id: '',
    }
  },
  props: {
    awardsProps: {
      type: Object,
      default: function () {
        return {
          awardList: [
            { id: nanoid(), desc: '2020年国家奖学金' },
            { id: nanoid(), desc: '2019年优秀三好学生' },
          ],
          moduleTitle: '荣誉奖励',
        }
      },
    },
    moduleId: {
      type: String,
      default:nanoid()
    },
  },
  computed:{
    ...mapGetters(['myThemeColor'])
  },
  created() {
    this.awardInfo = { ...this.awardsProps }
    this.id = this.moduleId
  },
  components: { TitleB, AutoTextArea },
  methods: {
    // 修改荣誉内容
    onAwardChange(id, newVal) {
      this.awardInfo.awardList.some((item) => {
        if (item.id === id) {
          item.desc = newVal
          return
        }
      })
      this.updateStore()
    },
    // 标题右侧标签被点击时
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addAward()
          break
        case 'delete':
          this.deleteAward()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    // 新增一条荣誉记录
    addAward() {
      let id = nanoid()
      let award = { id, desc: '添加一条新纪录' }
      this.awardInfo.awardList.push(award)
      this.updateStore()
    },
    // 删除一条荣誉记录
    deleteAward() {
      if (this.awardInfo.awardList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.awardInfo.awardList.pop()
        this.updateStore()
      }
    },
    // 移除该模块
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    // 修改模块标题
    onModuleTitleUpdate(newTitle) {
      this.awardInfo.moduleTitle = newTitle
      this.updateStore()
    },
    // 更新仓库数据
    updateStore() {
      const newData = { props: this.awardInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
}
</script>

<style lang="less" scoped>
.awards-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
.tool-box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row-reverse;
  visibility: visible;
}
.tool {
  width: 200px;
  height: 40px;
  border: 2px var(--rs-bgcolor-1) dashed;
  border-radius: 3px;
  margin-top: 5px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 2px 10px;
  gap: 10px;
  color: var(--rs-bgcolor-1);
  font-size: 30px;
}
.awardEdit-min-box {
  padding: 0 15px;
}
</style>
